<template>
  <div class="selected-city" v-if="isLoaded">
    <div class="top">
      <div class="weather-info" v-for="item in weatherInfoTop">
        <span>{{ item.week }}</span>
        <span>{{ item.date }}</span>
        <span>{{ item.weather }}</span>
        <span>{{ item.wind }}</span>
      </div>
    </div>
    <div class="bottom">
      <v-chart :option="option"></v-chart>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import { useWeatherStore } from '@/stores/weather'
import { storeToRefs } from 'pinia'

const { weatherInfoTop, dayTempArr, nightTempArr, isLoaded } = storeToRefs(useWeatherStore())

const option = ref({})

const renderChart = (dayTempArr, nightTempArr) => {
  option.value = {
    xAxis: {
      data: ['今天', '明天', '周五', '周六'], //横坐标轴标注被隐藏，内容也没有标注，所以没改
      type: 'category',
      axisLabel: {
        show: false, // 隐藏横坐标轴标注
      },
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      top: 20, //写0会导致图表顶部显示不完整
      left: 0,
      right: 0,
      bottom: 20, //写0会导致图表底部显示不完整
    },
    series: [
      {
        data: dayTempArr,
        type: 'line',
        label: {
          show: true,
          color: 'white',
          formatter: '白{c}°C', //c代表数据值，规定用法
        },
        smooth: true,
      },
      {
        data: nightTempArr,
        type: 'line',
        label: {
          show: true,
          position: 'bottom',
          color: 'white',
          formatter: '晚{c}°C',
        },
        smooth: true,
      },
    ],
  }
}

onMounted(() => {
  renderChart(dayTempArr, nightTempArr)
})
</script>

<style lang="scss" scoped>
.selected-city {
  padding: 40px 48px 0;
  margin-top: 8px;
  background-color: rgb(0, 78, 113);
  border-radius: 4px;

  .top {
    display: flex;
    gap: 24px;

    .weather-info {
      flex: 1 1 0%;
      display: flex;
      flex-direction: column;
      gap: 16px;
      color: white;
      line-height: 24px;
      text-align: center;
    }
  }

  .bottom {
    height: 180px;
    margin-top: 40px;
  }
}
</style>
